<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <title>工具</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/vue/ElementUI/index.css">
</head>
<body>
<div id="app">
    <div style="padding: 0; margin: 0; margin-bottom: 16px; display: block;">
        <div style="color: #303133; font-weight: bold; display: inline-block; ">工具</div>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
        <el-tab-pane label="添加新监控对象" name="sqlOpt">
            <div class="demo-input-suffix">
                预约人：
                <el-input
                        placeholder="输入预约人"
                        prefix-icon="el-icon-search"
                        v-model="username">
                </el-input>
                <div style="height: 10px;"></div>
                科室：
                <el-input
                        placeholder="请填写监控科室"
                        v-model="keshi">
                </el-input>
                <div style="height: 10px;"></div>
                医生：
                <el-input
                        placeholder="请输入医生名字"
                        prefix-icon="el-icon-search"
                        v-model="doctor">
                </el-input>
                <div v-show="result!=''">
                    结果：
                    <el-input
                            type="textarea"
                            placeholder="结果"
                            :rows="4"
                            prefix-icon="el-icon-search"
                            v-model="result">
                    </el-input>
                </div>

            </div>
            <div style="height: 10px;"></div>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-dialog :visible.sync="visible" title="Hello world">
                <p>Try Element</p>
            </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="操作历史" name="history">
            <el-table
                    v-loading="loading"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="WhoYuYue"
                        label="操作人"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="KeShiName"
                        label="科室"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="DoctorName"
                        label="医生">
                </el-table-column>
                <el-table-column
                        prop="HopeDate"
                        label="日期">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="listOperate('delete',scope.row)" size="mini">删除监控</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="height: 20px;"></div>
            <el-pagination v-show="tableTotal>tablePageSize"
                    @current-change="handleCurrentChange"
                    :current-page.sync="tablePage"
                    :page-sizes="[50, 100, 200, 300]"
                    :page-size="tablePageSize"
                    layout="sizes, prev, pager, next"
                    :total="tableTotal">
            </el-pagination>
        </el-tab-pane>
    </el-tabs>
</div>
</body>
<style type="text/css">
    body {
        padding-top: 5px;
        padding-left: 20px;
        padding-right: 20px;
    }
</style>
<!-- import Vue before Element -->
<script src="/static/vue/vue.js"></script>
<script src="/static/vue/vue-resource.min.js"></script>
<!-- import JavaScript -->
<script src="/static/vue/ElementUI/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                username: '',
                keshi: '',
                doctor: '',
                result: '',
                activeName: 'sqlOpt',
                tableData: [],
                tablePage:1,
                tablePageSize:50,
                tableTotal:100,
                loading:false,
                comment:'',

            }
        },
        mounted: function () {
            // let storage=window.localStorage;
            // this.username = storage.username;
        },
        methods: {
            listOperate:function(opt, value) {
                if (opt == 'delete') {
                    console.log(value);
                    this.deleteItem(value.WhoYuYue,value.KeShiName, value.DoctorName);
                }
            },
            tabClick:function(tab, event) {
                console.log(this.activeName);
                if (this.activeName == "history") {
                    this.getHistory();
                }
            },
            submit: function () {
                let storage=window.localStorage;
                storage.username = this.username;
                this.$http.post('/hospital/add', {
                    username: this.username,
                    keshi: this.keshi,
                    doctor: this.doctor
                }, {emulateJSON: true}).then(function (res) {
                    console.log(res);
                    if (res.body.code == 200) {
                        // this.$message('请求成功!');
                        this.result = JSON.stringify(res.body.data);
                    } else if (res.body.code == 400) {
                        let msg = '请求失败！' + res.body.message;
                        this.$message.error(msg);
                        this.result = msg;
                    }
                }, function (res) {
                    console.log(res.status);
                });
            },
            handleCurrentChange:function() {
                this.getHistory();
            },
            getHistory: function() {
                this.loading = true;
                this.$http.post('/hospital/list', {
                    page: this.tablePage,
                    pageSize: this.tablePageSize,
                }, {emulateJSON: true}).then(function (res) {
                    this.loading = false;
                    if (res.body.code == 200) {
                        // this.$message('请求成功!');
                        this.tableData = res.body.data;
                        this.tableTotal = 0;
                    } else if (res.body.code == 400) {
                        let msg = '请求失败！' + res.body.message;
                        this.$message.error(msg);
                        this.result = msg;
                    }
                }, function (res) {
                    this.loading = false;
                    console.log(res.status);
                });
            },
            deleteItem: function(name,keshi,doctor) {
                this.loading = true;
                this.$http.post('/hospital/delete', {
                    name: name,
                    keshi: keshi,
                    doctor: doctor,
                }, {emulateJSON: true}).then(function (res) {
                    this.loading = false;
                    if (res.body.code == 200) {
                        this.$message('删除成功!');
                        this.getHistory();
                        // this.tableData = res.body.data;
                        // this.tableTotal = 0;
                    } else if (res.body.code == 400) {
                        let msg = '请求失败！' + res.body.message;
                        this.$message.error(msg);
                        this.result = msg;
                    }
                }, function (res) {
                    this.loading = false;
                    console.log(res.status);
                });
            }
        }
    })
</script>
</html>